<template>
     <div class="reviewer-list flex">
        <div class="name text-right"><span class="text-red" v-if="isRequired">*</span>{{title}}:</div>
        <div class="flex-1">
          <ul class="user-list flex-1">
            <li v-for="(item, index) in userList" :key="index" class="user-item">
              <span @click="showSelectPerson(item, index)" class="ellipsis cursor-pointer" style="display: inline-block;">{{item.name}}</span>
              <q-icon @click="delUser(item)" class="close fr" name="iconfont icontubiao-89" />
              <q-tooltip>{{item.name}}</q-tooltip>
            </li>
            <li class="add-item" v-if="userList.length < ltPerson" @click="showSelectPerson(null)">
              <q-icon
                name="iconfont icontubiao-39"
                class="add-icon"
              />添加审核人
            </li>
          </ul>
        </div>
      <PeopleSelect ref="people" title="添加审核人" @selectUser="selectUser" v-if="isShowP" @close="isShowP = false" needCheck/>
      </div>
</template>
<script>
import PeopleSelect from 'src/components/people-select/index'
import _ from 'lodash'
export default {
  name: 'set-user-common',
  components: {
    PeopleSelect
  },
  props: {
    value: Array,
    title: String,
    isRequired: Boolean,
    // 添加的最大人数
    ltPerson: {
      type: Number,
      default: 5
    }
  },
  data () {
    return {
      userList: [],
      selItem: null,
      selIndex: null,
      isShowP: false
    }
  },
  watch: {
    value: {
      handler (val) {
        this.userList = val
      },
      deep: true,
      immediate: true
    },
    userList: {
      deep: true,
      handler () {
        this.$emit('input', this.userList)
      }
    }
  },
  methods: {
    showSelectPerson (item, index) {
      this.isShowP = true
      setTimeout(() => {
        this.selItem = item
        this.selIndex = index
        this.$refs.people.showDialog()
      })
    },
    delUser (item) {
      this.userList = this.userList.filter(v => v.approver !== item.approver)
    },
    selectUser (data) {
      if (_.isEmpty(data)) {
        this.$message.warning('请选择审核人员')
        return
      }
      const params = {
        approver: _.get(data, 'id', ''),
        name: _.get(data, 'name', '')
      }
      if (this.userRole(params)) return
      if (_.isNil(this.selItem)) {
        this.userList.push(params)
      } else {
        const that = this
        _.remove(this.userList, function (n, index) {
          return index === that.selIndex
        })
        this.$set(this.userList, this.selIndex, params)
      }
      this.$refs.people.hideDialog()
      this.isShowP = false
    },
    userRole (params) {
      if (this.userList.some(v => v.approver === params.approver) && (_.isNil(this.selItem) || params.approver !== this.selItem.approver)) {
        this.$message.warning('同一级审批人不能重复')
        return true
      }
      return false
    }
  }
}
</script>
<style scoped lang="stylus">
  .reviewer-list{
    display flex
    .name{
      padding-right 6px
      text-align right
      color #333
      font-size 16px
      padding-top 3px
      width 100px
    }
    .user-list{
      flex 1
      display flex
      flex-wrap wrap
      .user-item{
        margin-bottom 10px
        margin-right 16px
        display inline-block
        padding 0 10px
        max-width:450px
        height:32px
        line-height 32px
        color #fff
        background:#F7B82D
        box-shadow:0px 1px 5px 0px rgba(0, 0, 0, 0.15)
        border-radius:6px
        .close{
          margin-left 10px
          margin-top 8px
          opacity 0.6
        }
      }
      .add-item{
        margin-bottom 10px
        margin-right 16px
        display inline-block
        padding 0 10px
        width:110px
        height:32px
        line-height 32px
        color #999
        background:#fff
        border-radius:6px
        border 1px dashed #999
        text-align center
        .add-icon{
          margin-right 4px
          margin-left -4px
          font-size 16px
          position relative
          top -1px
        }
      }
    }
  }
</style>
